<template>
	<div>
    <div class="charges-top">
      <div>
        <p class="fontGilroy">{{sort}}</p>
        <p>{{title}}</p>
      </div>
    </div>
    <div class="list" v-if="list && list.length>0">
      <div class="list-title">
        <span>排名</span>
        <span>{{identity}}</span>
        <span>{{rank_type}}</span>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad"
      >
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <span>
            <i :class="getCls(item.no)">{{getText(item.no)}}</i>
          </span>
          <span>{{item.nickname}}</span>
          <span class="fontGilroy">{{item.points}}</span>
        </div>
      </van-list>      
    </div>
    <div v-else>
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
  import { getPointRank } from '@/api/user/member/memberApi'
  import noData from '@/components/noData'
  // import noRankImg from '@img/user/no-order-rank.png'
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    components: {
      noData
    },
    data() {
      return {
        noData: {
          width: '214px',
          img: 'https://img.wifenxiao.com/h5-wfx/images/user/no-order-rank.png',
          text: '暂无排名',
          txtMarginTop: '-30px'
        },
        title: '我的排名',
        sort: '',
        identity: '用户',
        rank_type: '积分',
        list: [
        ],
        loading: false,
        finished: false,
        error: false,
        p: 2
      }
    },
    methods: {
      getCls(sort) {
        if (sort <= 3) {
          return `icon icon${sort}`
        } else {
          return 'text'
        }
      },
      getText(sort) {
        if (sort > 3) {
          return sort
        }
      },
      getLists() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
  
        getPointRank().then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            const resData = res.data
            this.sort = resData.my_no
            this.rank_type = resData.point_name
            const pageTitle = resData.point_name + '排行'
              wx.setNavigationBarTitle({
                title: pageTitle
              })
            this.list = resData.point_rank
          } else {
            this.$Error(res.msg)
          }
        })
      },
      onLoad() {
        this.loading = true
        const data = {
          p: this.p
        }
        getPointRank(data)
          .then(res => {
            this.loading = false
            if (res.data.point_rank && res.data.point_rank.length) {
              this.list.push(...res.data.point_rank)
              this.p++
            } else {
              this.finished = true
            }
          })
          .catch(() => {
            this.error = true
          })
      }
    },
    created() {
      this.getLists()
    },
    mounted() {
      // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
    },
  })
</script>

<style lang="scss">
@import 'src/styles/variables';
@import 'src/styles/mixin';

.charges-top {
  height: 330px;
  // line-height: 80px;
  text-align: center;
  background-color: #f0f0f0;
  background: url('https://img.wifenxiao.com/h5-wfx/images/user/point_bg_rank.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 73px;
  color: #fff;
  p:first-child {
    font-size: 50px;
    font-weight: bold;
  }
  p:last-child {
    font-size: 26px;
    margin-top: 16px;
    // font-weight: bold;
    letter-spacing: 2px;
    color:#FFD9DD;
  }
}
.list {
  margin: -90px 25px 0;
  background-color: $default;
  border-radius: 20px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 96px;
    margin:0 25px;
    border-bottom: 1px solid #EDEDED;
    span {
      font-size: 26px;
      color: #333333;
      &:nth-child(1) {
        width:26%;
        margin-right:8%;
        text-align:center;
      }
      &:nth-child(2) {
        width:34%;
        margin-right:2%;
      }
      &:nth-child(3) {
        width:30%;
      }
    }
  }
  &-item {
    height: 110px;
    display: flex;
    align-items: center;
    margin: 0 25px;
    border-bottom: 1px solid #EDEDED;
    span {
      font-size: 28px;
      &:nth-child(1) {
        width:26%;
        margin-right:8%;
      }
      &:nth-child(2) {
        width:34%;
        margin-right:2%;
        @include showEllipsis;
      }
      &:nth-child(3) {
        width:30%;
        font-size: 32px;
        color: #FD2049;
      }
      .icon,
      .text {
        display:block;
        width: 80px;
        height: 53px;
        margin:0 auto;
        line-height: 40px;
        font-weight: bold;
        text-align: center;
        // float: left;
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
        &.icon1 {
          background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/No1.png');
        }
        &.icon2 {
          background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/No2.png');
        }
        &.icon3 {
          background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/No3.png');
        }
      }
    }
  }
}
</style>
